import React, { Component } from 'react'

import { connect } from 'react-redux'

import { putdataAction } from './store/actionCreator'

const mapDispatchToProps = dispacth => {
  return {
    putData(task) {
      dispacth(putdataAction(task))
      // dispacth({
      //   type: 'PUT_DATA',
      //   task
      // })
    }
  }
}

@connect(null, mapDispatchToProps)
class Form extends Component {
  state = {
    task: ''
  }

  handleChange = (e) => {
    this.setState({
      task: e.target.value
    })
  }

  handleKeyUp = (e) => {
    if(e.keyCode === 13) {
      // console.log(this)
      this.props.putData(this.state.task)
      this.setState({
        task: ''
      })
    }
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.task} onChange={this.handleChange}
        onKeyUp={this.handleKeyUp}
        />
      </div>
    )
  }
}

export default Form